<template>
  <div class="g_header">
    <div class="m_header">
      <Icon
        :type="show?'ios-close':'ios-list'"
        color="#fff"
        size="45"
        @click="show = !show"
      />
      <img
        src="../../assets/footerLg.png"
        alt=""
        srcset=""
      >
      <transition name="el-fade-in-linear">
        <div
          v-if="show"
          class="menu_warpper"
        >

          <Menu
            mode="vertical"
            :active-name="activeName"
          >
            <MenuItem
              name="/index"
              to="/index"
            >首页</MenuItem>
            <MenuItem
              name="/enter"
              to="/enter"
            >走进世贸</MenuItem>
            <MenuItem
              name="/dynamic"
              to="/dynamic"
            >世贸动态</MenuItem>
            <MenuItem
              name="/service"
              to="/service"
            >世贸服务</MenuItem>
            <MenuItem
              name="/recruit"
              to="/recruit"
            >招商引资</MenuItem>
            <MenuItem
              name="/aboutus"
              to="/aboutus"
            >关于我们</MenuItem>
          </Menu>

        </div>
      </transition>
    </div>

    <div class="g_banner">
      <img
        src="../../assets/tit_banner.jpg"
        alt=""
        srcset=""
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      activeName: this.$route.path.split("/", 2).join("/")
    }
  },
  methods: {
   
  },
}
</script>

<style scoped lang="less">
.m_header {
  width: 100%;
  background: #6893be;
  text-align: center;
  padding: 10px;
  position: relative;
  img {
    width: 6.875rem;
  }
  .ivu-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -20px;
    font-weight: 700;
  }
  .menu_warpper {
    width: 40%;
    position: absolute;
    .ivu-menu {
      width: 100% !important;
    }
  }
}
.g_banner {
  img {
    width: 100%;
    height: 130px;
  }
}
</style>